<template>
  <a-layout class="layout" style="min-height: 100vh">
    <a-layout>
      <a-layout-header class="header" style="background: #fff; padding: 0">
        <div class="logo">
          <img src="/logo.svg"> <span>Api Doc</span>
        </div>
        <div class="user">
          <a-popover placement="bottom">
            <a-avatar style="color: #fff; background-color: #7db1fa" size="large">{{ user.name }}</a-avatar>
            <template #content style="width: 50px">
              <div>
                <a-button type="text" @click="showModal">个人中心</a-button>
                <a-modal v-model:open="open" title="个人信息" @ok="getUserInfo" :footer="null">
                  <div class="name" style="margin-top: 20px; display: flex; justify-content: space-between">
                    <p style="display: inline-block; width: 300px; margin-bottom: 0; line-height: 32px;" >昵称：{{user.name}}</p>
                    <a-button @click="changeNameOpen = true">编辑</a-button>
                  </div>
                  <hr />
                  <p>账号：{{user.account}}</p>
                  <p>邮箱：{{ user.email }}</p>
                </a-modal>
              </div>
              <a-button type="text" @click="router.push('/login')">退出登录</a-button>
            </template>
          </a-popover>
        </div>
      </a-layout-header>
      <div class="top">
        <a-input-search
            v-model:value="searchKey"
            placeholder="请输入项目名称关键字"
            enter-button="搜索项目"
            @search="onSearch"
            style="width: 300px"
        />
        <a-button type="primary" @click="openAdd = true" style="margin-left: 15px;">
          <template #icon>
            <component :is="PlusOutlined"/>
          </template>
          新建项目
        </a-button>
      </div>
      <a-layout-content class="content">
        <div class="data" :style="{ padding: '0 24px', minHeight: '360px' }">
          <Program :program="programs"/>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
  <a-modal v-model:open="openAdd" width="600px" destroy-on-close="destroy-on-close" :footer="null">
    <Add ref="addRef" @closeModal="closeAndRefresh"></Add>
  </a-modal>
  <a-modal v-model:open="changeNameOpen" title="修改名称" cancel-text="取消" ok-text="确认"
           destroy-on-close  @ok="handlerNameOk">
    <a-input :status="status" v-model:value="user.name" />
  </a-modal>
</template>
<script lang="ts" setup>
import {
  PlusOutlined
} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import {onMounted, ref} from 'vue';
import Add from "@/components/program/Add.vue";
import router from "@/router";
import axios from "@/axios";
import Program from "@/components/program/Program.vue";

// 控制对话框展开
const open = ref<boolean>(false);
const openAdd = ref(false);
const addRef = ref();
const changeNameOpen = ref(false)
const status = ref();

const searchKey = ref('');
const user = ref({
  name: '',
  account: '',
  email: '',
  id:''
});
const programs = ref();
// 搜索
const onSearch = () => {
  if (searchKey.value.trim().length === 0) {
    getProgram();
  } else {
    axios.get("/program", {
      params: {
        key: searchKey.value.trim()
      }
    }).then((response) => {
      // 清空搜索框
      searchKey.value = '';
      console.log(response.data)
      programs.value = response.data;
    })
  }
  console.log('search');
};

//加载个人主页的对话窗所需
const showModal = () => {
  open.value = true;
};

// 加载用户信息
onMounted(() => {
  getProgram();
  getUserInfo();
})

const getProgram = () => {
  axios.get("/program").then((response) => {
    programs.value = response.data;
  })
}

const getUserInfo = () => {
  axios.get("/user").then((response) => {
    user.value = response.data;
    open.value = false;
  })
}
const closeAndRefresh = (value: boolean) => {
  openAdd.value = value;
  getProgram();
}


//修改用户名称
const handlerNameOk = () => {
  const name = user.value.name.trim();
  if (name.length === 0) {
    status.value = 'error'
    message.error("用户名称不可为空")
    return
  }
  user.value.name = name;
  axios.put('/user', user.value).then((response: any) => {
    message.success(response.message)
    changeNameOpen.value = false;
  })
}
</script>
<style scoped>
.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      margin-left: 30px;
      font-size: 23px;
    }

    .user {
      margin-right: 50px;
    }
  }

  .top {
    margin-right: 24px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    text-align: right;
  }

  .content {
    margin: 20px auto auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .data {
      padding-top: 10px;
      height: 100%;
    }
  }
}
</style>
